<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取网页正确的大小</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }

    .box1 {
      position: fixed;
      left: 50px;
      top: 60px;
      width: 150px;
      height: 150px;
      background: #f5f5f5;
    }

    .box2 {
      position: absolute;
      left: 10px;
      top: 30px;
      width: 80px;
      height: 80px;
      background: #ddd;
    }

    .box3 {
      position: relative;
      width: 20px;
      height: 20px;
      background: red;
      margin-top: 15px;
      margin-left: 5px;
    }
  </style>
</head>
<body>
<div class="box1">
  <div class="box2">
    <div class="box3"></div>
  </div>
</div>
<!--

  http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

-->
<script>

  // 获取网页的整体的大小

  var util = {
    getViewport: function () {
      if (document.compatMode == "BackCompat") {
        return {
          width: document.body.clientWidth,
          height: document.body.clientHeight
        }
      } else {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        }
      }
    },
    getPagearea: function () {
      if (document.compatMode == "BackCompat") {
        return {
          width: Math.max(document.body.scrollWidth,
              document.body.clientWidth),
          height: Math.max(document.body.scrollHeight,
              document.body.clientHeight)
        }
      } else {
        return {
          width: Math.max(document.documentElement.scrollWidth,
              document.documentElement.clientWidth),
          height: Math.max(document.documentElement.scrollHeight,
              document.documentElement.clientHeight)
        }
      }
    },
    getElementLeft: function (element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;
      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }
      return actualLeft;
    },
    getElementTop: function (element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      return actualTop;
    },
    getElementViewLeft: function (element) {
      var actualLeft = element.offsetLeft;
      var current = element.offsetParent;
      while (current !== null) {
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
      }
      if (document.compatMode == "BackCompat") {
        var elementScrollLeft = document.body.scrollLeft;
      } else {
        var elementScrollLeft = document.documentElement.scrollLeft;
      }
      return actualLeft - elementScrollLeft;
    },
    getElementViewTop: function (element) {
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      if (document.compatMode == "BackCompat") {
        var elementScrollTop = document.body.scrollTop;
      } else {
        var elementScrollTop = document.documentElement.scrollTop;
      }
      return actualTop - elementScrollTop;
    }
  };


  console.log(util.getElementViewLeft(document.querySelector('.box3')))

  // 滚动高度
  const heightTop = document.documentElement.scrollTop || document.body.scrollTop;

  // else 获取元素位置的快速方法
  var x = document.querySelector('.box3').getBoundingClientRect().left;
  var y = document.querySelector('.box3').getBoundingClientRect().top;
  console.log(x, y)


  // 绝对位置
  // var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
  // var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop;

</script>
</body>
</html>
